<template>
  <div id="dtls">
    <div class="dtasnav">
      <van-nav-bar
      placeholder
      title="商品详情"
      left-text="返回"
      fixed
      left-arrow
      @click-left="onClickLeft"
      />
    </div>
    <div class="dtlssw">
     <van-swipe class="swipe" :style="{height:h}" :autoplay="3000" indicator-color="white"  >
        <van-swipe-item>
            <img src="../../public/img/1.jpg" alt="">
        </van-swipe-item>
        <van-swipe-item>
            <img src="../../public/img/2.jpg" alt="">
        </van-swipe-item>
        <van-swipe-item>
            <img src="../../public/img/3.jpg" alt="">
        </van-swipe-item>
        <van-swipe-item>
            <img src="../../public/img/4.jpg" alt="">
        </van-swipe-item>
        </van-swipe>
    </div>

    <van-card class="dtls-card-bq" price="13.88" desc="月销16" title="水果捞拼盘320克一份（西瓜+火龙果）" >
     <!-- <template #footer>
       <van-button round icon="plus" to="./shipping" type="primary" size="small" >加入购物车
       </van-button>
     </template> -->
    </van-card> 
     <van-skeleton title title-width="100%" :row="0"/>
     <div class="xz">
          <van-sku
          v-model="showBase"
          :sku="skuData.sku"
          :goods="skuData.goods_info"
          :goods-id="skuData.goods_id"
          :hide-stock="skuData.sku.hide_stock"
          :quota="skuData.quota"
          :quota-used="skuData.quota_used"
          :initial-sku="initialSku"
          reset-stepper-on-hide
          reset-selected-sku-on-hide
          disable-stepper-input
          :close-on-click-overlay="closeOnClickOverlay" 
          :custom-sku-validator="customSkuValidator" 
          @buy-clicked="onBuyClicked"
          @add-cart="onAddCartClicked" 
		     />
         <van-cell class="xz-btn" title="选择" is-link value="配送至：景洪"/>
            <!-- 发货 -->
         <van-cell class="xz-btn" title="发货" is-link value="福建 / 快递：免运费"  />
         <!-- 保障 -->
         <van-cell @click="showPopup" class="xz-btn" title="保障" is-link value="不支持7天无理由" />
         <van-popup v-model="show" position="bottom" round  closeable :style="{ height: '60%' }" >
           <div class="baoz">
             <br><br>
             <h1 class="jcfw-tit">基础服务</h1>
             <van-cell title="退货保障：该商品不支持7天无理由退货" icon="location-o" />    
             <br><br>        
             <h1 class="qt-tit">其他</h1>
             <van-cell title="集分宝" icon="location-o" />             
             <van-cell title="支付宝支付" icon="location-o" />             
             </div>
         </van-popup>
     </div>
    <van-skeleton title title-width="100%" :row="0"/>
     <div class="pj">
       <van-cell-group >
          <van-cell title="宝贝评价(250)" is-link value="查看全部" />
          </van-cell-group>
       <van-cell title="x**8" round icon="https://img01.yzcdn.cn/vant/cat.jpeg" size="large" label="1天前" />
     </div>

     <van-cell  style="height:100px;text-align:center" title="没有更多了~兄dei"  />
     <!-- /页脚/ -->
      <van-goods-action >
        <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" @click="wealWord"/>
        <van-goods-action-icon @click="shopping_cart" icon="cart-o" text="购物车" />
        <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
        <van-goods-action-button type="warning" @click="showBase = true" text="加入购物车" />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
  </div>
</template>
<script>
import skuData from '../../public/js/data.js'; 
export default {
  data() {
    return {
      show: false,
      h:"",
      skuData:skuData,
      showBase: false,
      showCustom: false,
      showStepper: false,
      showSoldout: false,
      closeOnClickOverlay: true,
      initialSku: { //默认选中
        s1: '30349',
        s2: '1193',
        selectedNum: 3
      },
      customSkuValidator: () => '请选择xxx!', 
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    onClickLeft(){
      this.$router.push("/")
    },
    onAddCartClicked(data) { //加入购物车
	    this.$toast('add cart:' + JSON.stringify(data));
	  },
    onBuyClicked(data) { //立即购买
      this.$toast('buy:' + JSON.stringify(data));
      console.log(JSON.stringify(data))
    },
    //点击客服时判断是否登录
    wealWord(){
        if(!(this.$store.state.islogin)){
            this.$toast.fail("您还没有登录哟！亲");
            return
        }else{
            this.$router.push('/word')
        }
    },
    //点击购物车时判断是否登录
    shopping_cart(){
        if(!(this.$store.state.islogin)){
            this.$toast.fail("您还没有登录哟！亲");
            return
        }else{
            this.$router.push('/shopping')
        }
    }
  }
};
</script>
<style class>
#dtls .van-nav-bar{
    background: #F1F1F1;
}
#dtls .pj .van-icon img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
#dtls .pj .van-cell__title{
  
font-size: 15px;
color: black;
font-weight: 550

}

#dtls .pj .van-cell__value{
  color: red;
  position: absolute;
  margin-left: 270px
}
#dtls .pj .van-icon {
  color: red
}

#dtls .pj .pj-a{
  display: inline;

}
#dtls .baoz h1 {
  text-align: center
}
#dtls  .van-cell__value {
  color: black;
  position: absolute;
  margin-left: 50px; 
}

#dtls  .van-cell__title{
  color: #646566;

}
#dtls .van-nav-bar{
    background: #F1F1F1;
}
#dtls .dtlssw img {
  width: 100%;
}

#dtls .dtls-xz {
  padding: 0;
  height: 50px;
}
#dtls .dtls-xz .van-cell {
  padding: 0;

  position: absolute;
  margin-top: 13px
}
#dtls .dtls-xz .xz-bt {
  height: 20px;
  background-color: #aaa;
  border: none;
}
#dtls .van-card__price {
  color: red;
}
#dtls .van-card__title {
  font-weight: 900;
  font-size: 15px;
}
#dtls .dtls-xz .xz-title{
  color: #aaa;
}
#dtls .dtls-xz .xz-stt{
  color: #ff455b;
  font-size: 10px;  
  margin-left: 180px
}
#dtls .dtls-xz .xz-blok{
  background-color: #ff455b;
  color: aliceblue;
  font-size: 12px;
  margin: 0 auto;
  border-radius: 10px;
  margin-left: 20px;
  display: inline-block;
}
#dtls .van-card__price span{
  font-size: 18px !important;
}
</style>